<template>
  <div class="container" v-if="formdata.zdlist && formdata.zdlist.length > 0">
    <!-- 动态标题区域 -->
    <div class="page-header">
      <h1 class="page-title">{{ pageTitle }}</h1>
    </div>
    
    <div class="main-content">
      <!-- 表单区域 - 采用响应式多列布局 -->
      <div class="form-section" :style="{order: formdata.orderlist[0]}">
        <el-form ref="baseFormRef" label-position="top" label-width="120px" class="responsive-form">
          <template v-for="(item, index) in formdata.zdlist" :key="index">
            <el-form-item 
              v-show="!hidezdlist.includes(item.en_name)"
              :label="item.edit == 0 ? item.cn_name + '：' + nullFun(obj[item.en_name]) : item.cn_name"
              :required="item.bitian == 1"
              :class="[
                item.edit == 0 ? 'readonly-field' : '',
                getFieldWidthClass(item)
              ]"
            >
              <!-- 只读字段 -->
              <div v-if="item.edit == 0" class="readonly-content">
                <!-- 空内容，按照uni-app逻辑 -->
              </div>
              
              <!-- 日期时间选择 -->
              <el-date-picker
                v-else-if="item.ctype == '选择日期时间'"
                v-model="obj[item.en_name]"
                type="datetime"
                :start="item.startdate"
                :end="item.enddate"
                placeholder="请选择日期时间"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
              
              <!-- 日期选择 -->
              <el-date-picker
                v-else-if="item.ctype == '选择日期' || item.ctype == '添加日期'"
                v-model="obj[item.en_name]"
                type="date"
                :start="item.startdate"
                :end="item.enddate"
                placeholder="请选择日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
              
              <!-- 日期范围选择 -->
              <el-date-picker
                v-else-if="item.ctype == '选择开始截止日期'"
                v-model="obj[item.en_name]"
                type="daterange"
                :start="item.startdate"
                :end="item.enddate"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
              
              <!-- 级联选择 -->
              <div v-else-if="item.ctype == '级联选择'" @click.stop>
                <el-cascader
                  v-model="shengs"
                  :options="dataTree"
                  placeholder="请选择"
                  popup-title="请选择"
                  @change="onechange(item, $event)"
                  @visible-change="onchange(item)"
                />
              </div>
              
              <!-- 参数选择或综合字段 -->
              <div v-else-if="item.ctype == '选择参数' || (item.zh_zdlist && item.zh_zdlist.length > 0)">
                <el-input
                  v-model="obj[item.en_name]"
                  placeholder="点击选择"
                  readonly
                  class="param-select-input"
                  @click="xzCanShu(item, index, undefined)"
                />
              </div>
              
              <!-- 图片显示 -->
              <div v-else-if="item.ctype == '显示图片'" class="image-display">
                <el-image
                  :src="yuming + (obj[item.en_name] || '')"
                  fit="cover"
                  style="width: 100px; height: 100px;"
                  @click="previewImage(yuming + (obj[item.en_name] || ''))"
                  preview-teleported
                />
              </div>
              
              <!-- 明细数据 -->
              <div v-else-if="item.addgzqx == 1" class="detail-section">
                <div v-for="(it, i) in obj[item.en_name]" :key="i" class="detail-item">
                  <el-card style="position: relative; margin-bottom: 16px;">
                    <template #header>
                      <span>{{ item.cn_name }}{{ i + 1 }}</span>
                    </template>
                    <div class="detail-fields">
                      <div v-for="(field, inx) in item.fz_zdlist" :key="inx" class="field-row">
                        <div class="field-label">{{ field.cn_name }}</div>
                        <div v-if="field.ctype" class="field-input">
                          <el-input
                            v-model="it[field.en_name]"
                            placeholder="点击选择参数"
                            readonly
                            class="param-select-input"
                            @click="xzDanCanShu(item, i, inx)"
                          />
                        </div>
                        <div v-else class="field-input">
                          <el-input
                            v-model="it[field.en_name]"
                            :type="field.zdtype === 'number' ? 'number' : 'text'"
                          />
                        </div>
                      </div>
                    </div>
                    <el-button 
                      type="danger" 
                      size="small" 
                      class="delete-btn"
                      @click="delmx(item.en_name, i)"
                    >
                      删除
                    </el-button>
                  </el-card>
                </div>
                <el-button type="primary" style="width: 100%;" @click="addgz(item)">
                  +添加明细
                </el-button>
              </div>
              
              <!-- 普通输入框 -->
              <div v-else>
                <el-input
                  v-if="item.zdtype == 'number'"
                  v-model.number="obj[item.en_name]"
                  type="number"
                  :disabled="item.zhidu > 0"
                />
                <el-input
                  v-else
                  v-model="obj[item.en_name]"
                  :disabled="item.zhidu > 0 && item.ctype !== '选择参数_可手动填写'"
                />
              </div>
              
              <!-- 提示信息 -->
              <div v-if="item.tishi" v-html="item.tishi" class="field-tip"></div>
              
              <!-- 上传按钮区域 -->
              <div v-if="item.ctype == '上传营业执照' || item.ctype == '上传身份证正面' || item.ctype == '上传身份证反面'" class="upload-buttons">
                <el-button size="small" type="primary" @click="chooseImage(item)">
                  {{ item.ctype }}
                </el-button>
              </div>
              
              <!-- 上传选择营业执照 -->
              <div v-if="item.ctype == '上传选择营业执照'" class="upload-select-buttons">
                <el-button size="small" type="primary" @click="chooseImage(item)">上传营业执照</el-button>
                <div class="button-gap"></div>
                <el-button size="small" type="success" @click="xzDanCanShu(item, index)">选择营业执照</el-button>
              </div>
              
              <!-- 上传选择身份证正面 -->
              <div v-if="item.ctype == '上传选择身份证正面'" class="upload-select-buttons">
                <el-button size="small" type="primary" @click="chooseImage(item)">上传身份证正面</el-button>
                <div class="button-gap"></div>
                <el-button size="small" type="success" @click="xzDanCanShu(item, index)">选择身份证正面</el-button>
              </div>
              
              <!-- 上传选择身份证反面 -->
              <div v-if="item.ctype == '上传选择身份证反面'" class="upload-select-buttons">
                <el-button size="small" type="primary" @click="chooseImage(item)">上传身份证反面</el-button>
                <div class="button-gap"></div>
                <el-button size="small" type="success" @click="xzDanCanShu(item, index)">选择身份证反面</el-button>
              </div>
              
              <!-- 上传身份证正面和反面 -->
              <div v-if="item.ctype == '上传身份证正面和反面'" class="upload-select-buttons">
                <el-button size="small" type="primary" @click="chooseImage(item, 'app_shenfenz_sb')">
                  上传身份证正面
                </el-button>
                <div class="button-gap"></div>
                <el-button size="small" type="primary" @click="chooseImage(item, 'app_shenfenzfm_sb')">
                  上传身份证反面
                </el-button>
              </div>
              
              <!-- 双按钮选择数据 -->
              <div v-if="item.ctype == '双按钮选择数据'" class="upload-select-buttons">
                <el-button size="small" type="primary" @click="xzDanCanShu(item, index, item.wtype)">
                  选择合同流程
                </el-button>
                <div class="button-gap"></div>
                <el-button size="small" type="success" @click="xzDanCanShu(item, index, item.wtype_2)">
                  选择老合同
                </el-button>
              </div>
            </el-form-item>
          </template>
        </el-form>
      </div>

      <!-- 子表1区域 -->
      <div class="table-section" :style="{order: formdata.orderlist[1]}" v-if="formdata.zib_zd_list">
        <!-- 添加设备按钮 -->
        <div class="tr" v-if="formdata.zib_zd_list && formdata.zib_zd_list.add == 1">
          <div class="td_hang CenterButton" v-if="formdata.zib_zd_list.faid">
            <el-button 
              type="success" 
              class="all_button button_lvse one_button"
              @click="toUrl_addshebei(formdata.zib_zd_list.faid)"
            >
              添加设备信息
            </el-button>
          </div>
        </div>

        <!-- 设备列表 -->
        <div class="table" v-if="formdata.zib_zd_list && formdata.zib_zd_list.faid > 0">
          <div class="biaoti_01">
            <div class="bt-color">
              {{ formdata.zib_zd_list.biaoti }}（{{ formdata.zib_zd_list.jllist.length }}）
            </div>
          </div>
          
          <div 
            v-for="(it, indes) in formdata.zib_zd_list.jllist" 
            :key="indes" 
            class="zb_list"
            @click.stop="editSb(indes, formdata.zib_zd_list.edit)"
          >
            <div class="info-box">
              <div class="titles">
                {{ it.dbiaoti }}
              </div>
              <div class="khlist" v-for="(items, ind) in it.hlist" :key="ind">
                {{ items.neirong }}
              </div>
              <div class="copys">
                <el-button 
                  v-for="(text, idx) in formdata.zib_zd_list.x_anlist" 
                  :key="idx"
                  :type="text.ctype == 'del' ? 'danger' : 'primary'"
                  size="small"
                  plain
                  class="action-btn"
                  @click.stop="operate(indes, text.ctype)"
                >
                  {{ text.biaoti }}
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 子表2区域 -->
      <div class="table-section" :style="{order: formdata.orderlist[2]}" v-if="formdata.zib_tab_list">
        <div 
          v-for="(table, tableIndex) in formdata.zib_tab_list" 
          :key="tableIndex" 
          class="sub-table-container"
        >
          <!-- 添加按钮 -->
          <div class="add-device-section" v-if="table.add == 1">
            <el-button 
              type="success" 
              class="add-device-button"
              @click="toUrl_addshebeiT(table)"
              :icon="Plus"
            >
              {{ table.add_an_biaoti }}
            </el-button>
          </div>
          
          <!-- 列表标题 -->
          <div class="device-list-header">
            <div class="device-count-badge">
              <span class="badge-label">{{ table.biaoti }}</span>
              <span class="badge-count">({{ table.count }})</span>
            </div>
          </div>
          
          <!-- 数据列表 -->
          <div class="device-list">
            <div 
              v-for="(item, index) in table.jllist" 
              :key="index" 
              class="device-item-card"
              :class="item.hang_class"
              @click="toUrl_xq(item, table.edit)"
            >
              <!-- 卡片内容 -->
              <div class="device-card-content">
                <!-- 标题 -->
                <div class="device-title">{{ item.dbiaoti }}</div>
                
                <!-- 信息列表 -->
                <div class="device-info-list">
                  <div v-for="(detail, idx) in item.hlist" :key="idx" class="device-info-item">
                    {{ detail.neirong }}
                  </div>
                </div>
                
                <!-- 操作按钮组 -->
                <div class="device-actions">
                  <el-button 
                    v-for="(btn, idx) in table.x_anlist" 
                    :key="idx"
                    :type="getActionButtonType(btn.ctype)"
                    size="small"
                    plain
                    @click.stop="operates(table, btn, index)"
                  >
                    {{ btn.biaoti }}
                  </el-button>
                </div>
              </div>
            </div>
            
            <!-- 空状态 -->
            <div v-if="table.jllist.length === 0" class="empty-device-list">
              <div class="empty-icon">📋</div>
              <div class="empty-text">暂无{{ table.biaoti }}信息</div>
              <el-button 
                type="primary" 
                @click="toUrl_addshebeiT(table)"
                class="empty-add-button"
              >
                {{ table.add_an_biaoti }}
              </el-button>
            </div>
          </div>
        </div>
      </div>

      <!-- 图片上传区域 -->
      <div class="upload-section" :style="{order: formdata.orderlist[3]}" v-if="formdata.imgs && formdata.imgs.length">
        <UploadImg
          v-for="item in formdata.imgs"
          :key="item.en_name"
          :imgs="[item]"
          :faid="faid"
          :obj="obj"
          :imgUrl="formdata.img_url || ''"
          :isgps="formdata.isgps || false"
          @child-event="handleUploadClick"
        />
      </div>
    </div>

    <!-- 底部按钮 -->
    <div class="button-container" v-if="formdata.anlist">
      <div class="button-group">
        <!-- 更多按钮显示 -->
        <div v-if="Anshow" class="more-buttons-overlay">
          <div class="more-buttons-container">
            <div 
              v-for="(btn, index) in formdata.anlist.slice(4)" 
              :key="index"
              class="more-button-item"
              :class="getButtonClass(btn)"
              @click="dialogClick(btn)"
            >
              <div class="button-icon">
                {{ getButtonIcon(btn.leixing || btn.biaoti) }}
              </div>
              <span class="button-text">{{ btn.biaoti }}</span>
            </div>
          </div>
        </div>
        
        <!-- 主要按钮（前4个） -->
        <div 
          v-for="(btn, index) in formdata.anlist.slice(0, 4)" 
          :key="index"
          class="bottom-button"
          :class="getButtonClass(btn)"
          @click="dialogClick(btn)"
        >
          <div class="button-icon">
            {{ getButtonIcon(btn.leixing || btn.biaoti) }}
          </div>
          <span class="button-text">{{ btn.biaoti }}</span>
        </div>
        
        <!-- 更多按钮 -->
        <div 
          v-if="formdata.anlist.length > 4"
          class="bottom-button more-button"
          :class="{ active: Anshow }"
          @click="Anshow = !Anshow"
        >
          <div class="button-icon">
            {{ Anshow ? '▲' : '▼' }}
          </div>
          <span class="button-text">更多</span>
        </div>
      </div>
    </div>

    <!-- 参数选择弹窗 -->
    <el-dialog v-model="showPopup" title="请选择" width="80%" :close-on-click-modal="false">
      <div class="popup-content">
        <!-- 顶部操作按钮 -->
        <div class="popup-header">
          <span class="popup-title">请选择</span>
          <div class="popup-buttons">
            <el-button v-if="dx == 1" type="primary" size="small" @click="toggleAll">全选</el-button>
            <el-button v-if="dx == 1" type="success" size="small" @click="notarize">确认</el-button>
            <el-button type="warning" size="small" @click="empty">清空</el-button>
          </div>
        </div>
        
        <!-- 搜索区域 -->
        <div class="search-area">
          <div class="search-box">
            <el-input v-model="key" placeholder="查询" style="width: 200px;">
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
            <el-button type="primary" @click="cxDanCanShu">查询</el-button>
          </div>
        </div>
        
        <!-- 列表区域 -->
        <div class="list-container">
          <template v-for="(item, index) in xzlist" :key="index">
            <!-- 多选模式 -->
            <div v-if="dx == 1" class="list-item">
              <div class="item-content" @click="selectItem(item, index)">
                <div class="item-header">
                  <div class="checkbox-container">
                    <div class="checkbox-custom" :class="{ 'checked': item.check == 1 }">
                      <div v-if="item.check == 1" class="checkbox-inner"></div>
                    </div>
                  </div>
                  <span class="item-title">{{ item.biaoti }}</span>
                  <div v-if="dx == 1 && item.biaoti == '其他'" class="other-input" @click.stop>
                    <el-input
                      v-model="formdata.zdlist[infoIndex].qitazd"
                      :disabled="item.check != 1"
                      placeholder="请输入用途"
                    />
                  </div>
                </div>
                <div class="item-details">
                  <div v-for="(detail, idx) in item.hlist" :key="idx" class="detail-text">
                    {{ detail }}
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 单选模式 -->
            <div v-else class="list-item">
              <div class="item-content" @click="selectItem(item, index)">
                <div class="item-header">
                  <span class="item-title">{{ item.biaoti }}</span>
                  <div v-if="item.biaoti == '其他'" class="other-input" @click.stop>
                    <el-input
                      v-model="formdata.zdlist[infoIndex].qitazd"
                      placeholder="请输入其他"
                    />
                    <el-button 
                      type="primary" 
                      size="small"
                      @click="selectItem(item, index)"
                    >
                      确定
                    </el-button>
                  </div>
                </div>
                <div class="item-details">
                  <div v-for="(detail, idx) in item.hlist" :key="idx" class="detail-text">
                    <div @click="selectItem(item, index)">{{ detail }}</div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </el-dialog>

    <!-- 综合字段弹窗 -->
    <el-dialog v-model="showZhPopup" title="" width="60%" :close-on-click-modal="false">
      <div class="zh-popup-container">
        <div class="zh-popup-close" @click="closeZhPopup">
          <span class="close-icon">×</span>
        </div>
        
        <div class="zh-popup-header">
          <el-button type="primary" @click="validateAndSubmit">确定</el-button>
          <el-button @click="clearFormValues">清空</el-button>
        </div>
        
        <div class="zh-popup-tips" v-if="Zhlist.tishi">
          {{ Zhlist.tishi }}
        </div>
        
        <div class="zh-popup-content">
          <div v-for="(field, index) in Zhlist.zh_zdlist" :key="index" class="zh-form-group">
            <label class="zh-form-label">
              <span v-if="field.bitian == 1" class="required-mark">*</span>
              {{ field.cn_name }}:
            </label>
            
            <div v-if="field.zhi_list && field.zhi_list.length > 0" class="zh-picker-wrapper">
              <el-select v-model="Zhmoban[field.en_name]" placeholder="请选择">
                <el-option
                  v-for="option in field.zhi_list"
                  :key="option"
                  :label="option"
                  :value="option"
                />
              </el-select>
            </div>
            <el-input 
              v-else
              v-model="Zhmoban[field.en_name]"
              :type="field.zdtype === 'number' ? 'number' : 'text'"
              placeholder="请输入"
            />
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 确认弹窗 -->
    <el-dialog v-model="showBtnPopup" :show-close="false" width="300px">
      <div class="confirm-popup">
        <div class="confirm-icon">⚠️</div>
        <div class="confirm-title">提示</div>
        <div class="confirm-content">{{ dialogTxt }}</div>
        <div class="confirm-buttons">
          <el-button @click="cancelLogout">取消</el-button>
          <el-button type="primary" @click="logout">确定</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 设备编辑弹窗 -->
    <DeviceEditDialog
      v-model:visible="showDeviceDialog"
      :edit-params="deviceEditParams"
      @save-success="handleDeviceSaveSuccess"
    />
  </div>
</template>

<script>
import { ref, reactive, onMounted, computed, watch, watchEffect, onBeforeUnmount } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Search } from '@element-plus/icons-vue'
import request, { getApiPath } from '@/utils/request'
import { Base64 } from 'js-base64'
import base64 from '@/utils/base64.js'
import { postRequest } from '@/utils/request.js'
import DeviceEditDialog from '@/views/business/hetonglclb/hetonglcsb_edit.vue'
import UploadImg from '@/components/ImageUpload.vue'

export default {
  name: 'HetonglcxqEdit',
  components: {
    DeviceEditDialog,
    UploadImg
  },
  setup() {
    const route = useRoute()
    const router = useRouter()
    
    // 响应式数据
    const faid = ref(0)
    const currentId = ref(0)
    const obj = reactive({})
    const formdata = reactive({
      zdlist: [],
      anlist: [],
      orderlist: [0, 1, 2, 3],
      caogao_save: false,
      shuzu_sb: [],
      zib_zd_list: null,
      zib_tab_list: null,
      imgs: null,
      dzht_obj: null,
      shuzu_dzhtsb: []
    })
    
    const xzlist = ref([])
    const cxlx = ref(0)
    const jkgongshi = ref([])
    const kongobj = ref({})
    const dx = ref(0)
    const gzqx = ref(0)
    const gzxbs = ref(0)
    const liuchengbh = ref('')
    const dtype = ref('add')
    const pageTitle = ref('合同流程编辑') // 动态页面标题
    const lsobj = ref({})
    const infoIndex = ref(0)
    const key = ref('')
    const hidezdlist = ref([])
    const yuming = ref('https://vue.haozskj.com')
    const Zhlist = ref({})
    const Zhmoban = ref({})
    const shengs = ref('')
    const dataTree = ref([])
    const dialogTxt = ref('')
    const isFormSaved = ref(false) // 表单保存状态
    const dialogObj = ref({})
    const Anshow = ref(false)
    
    // 弹窗控制
    const showPopup = ref(false)
    const showZhPopup = ref(false)
    const showBtnPopup = ref(false)
    const baseFormRef = ref()
    
    // 设备弹窗控制
    const showDeviceDialog = ref(false)
    const deviceEditParams = ref({})
    
    // 设备操作相关
    const currentDeviceIndex = ref(-1)

    // 获取设备标题
    const getDeviceTitle = (item) => {
      // 优先使用设备名称或型号
      return item.shebeimc || item.shebeimingchen || item.xinghao || item.dbiaoti || '设备信息'
    }

    // 获取设备字段信息
    const getDeviceFields = (item) => {
      const fields = []
      
      // 根据实际数据结构来显示字段，模拟您截图中的信息
      if (item.pingaigaodu || item.gaodu) {
        fields.push({
          label: '平台高度',
          value: (item.pingaigaodu || item.gaodu || '') + (item.gaodu ? '米' : '')
        })
      }
      
      if (item.yujieshuliang || item.shuliang) {
        fields.push({
          label: '预计数量(台)',
          value: item.yujieshuliang || item.shuliang || ''
        })
      }
      
      if (item.rizudanjia || item.danjia) {
        fields.push({
          label: '日租单价',
          value: item.rizudanjia || item.danjia || ''
        })
      }
      
      if (item.yuezudanjia) {
        fields.push({
          label: '月租单价',
          value: item.yuezudanjia || ''
        })
      }
      
      if (item.yuqizuqi || item.zuqi) {
        fields.push({
          label: '预计租期',
          value: item.yuqizuqi || item.zuqi || ''
        })
      }
      
      if (item.zuiduanzuqi) {
        fields.push({
          label: '最短租期',
          value: item.zuiduanzuqi || ''
        })
      }
      
      if (item.jintuichangyunfei || item.yunfei) {
        fields.push({
          label: '进退场运输费(元/台)',
          value: (item.jintuichangyunfei || item.yunfei || '0')
        })
      }
      
      // 如果没有匹配的字段，显示原始hlist数据
      if (fields.length === 0 && item.hlist) {
        item.hlist.forEach(detail => {
          if (detail.neirong) {
            fields.push({
              label: '信息',
              value: detail.neirong
            })
          }
        })
      }
      
      return fields
    }

    // 获取按钮图标
    const getButtonIcon = (type) => {
      const iconMap = {
        'save': '💾',
        'submit': '📤',
        'tijiao': '✅',
        'baocun': '💾',
        'delete': '🗑️',
        'shanchu': '🗑️',
        'edit': '✏️',
        'xiugai': '✏️',
        'cancel': '❌',
        'quxiao': '❌',
        'back': '⬅️',
        'fanhui': '⬅️',
        'confirm': '✔️',
        'queren': '✔️',
        'add': '➕',
        'tianjia': '➕',
        'copy': '📋',
        'fuzhi': '📋',
        'view': '👁️',
        'chakan': '👁️',
        'print': '🖨️',
        'dayin': '🖨️',
        'export': '📊',
        'daochu': '📊',
        'search': '🔍',
        'chaxun': '🔍'
      }
      
      // 根据类型或标题获取图标
      const key = type?.toLowerCase()
      if (iconMap[key]) {
        return iconMap[key]
      }
      
      // 根据文字内容推测图标
      if (type?.includes('保存') || type?.includes('存储')) return '💾'
      if (type?.includes('提交') || type?.includes('确认')) return '✅'
      if (type?.includes('删除') || type?.includes('移除')) return '🗑️'
      if (type?.includes('编辑') || type?.includes('修改')) return '✏️'
      if (type?.includes('取消') || type?.includes('关闭')) return '❌'
      if (type?.includes('返回') || type?.includes('后退')) return '⬅️'
      if (type?.includes('添加') || type?.includes('新增')) return '➕'
      if (type?.includes('复制')) return '📋'
      if (type?.includes('查看') || type?.includes('预览')) return '👁️'
      if (type?.includes('打印')) return '🖨️'
      if (type?.includes('导出')) return '📊'
      if (type?.includes('查询') || type?.includes('搜索')) return '🔍'
      
      // 默认图标
      return '📋'
    }

    // 获取按钮样式类
    const getButtonClass = (btn) => {
      const type = btn.leixing || btn.biaoti?.toLowerCase() || ''
      
      if (type.includes('保存') || type.includes('save') || type.includes('baocun')) {
        return 'success-action'
      }
      if (type.includes('提交') || type.includes('确认') || type.includes('submit') || type.includes('tijiao')) {
        return 'primary-action'
      }
      if (type.includes('删除') || type.includes('移除') || type.includes('delete') || type.includes('shanchu')) {
        return 'danger-action'
      }
      
      return ''
    }

    // 获取字段宽度样式类
    const getFieldWidthClass = (item) => {
      // 根据字段类型和内容长度确定宽度
      const ctype = item.ctype || ''
      const cnName = item.cn_name || ''
      
      // 全宽字段 - 需要占据整行的字段
      if (ctype.includes('选择开始截止日期') || 
          ctype.includes('显示图片') || 
          ctype.includes('明细数据') ||
          item.addgzqx === 1 ||
          ctype.includes('上传') ||
          ctype.includes('双按钮选择数据') ||
          cnName.includes('备注') ||
          cnName.includes('说明') ||
          cnName.includes('描述') ||
          cnName.includes('详情') ||
          cnName.includes('地址') ||
          cnName.includes('位置')) {
        return 'field-full'
      }
      
      // 半宽字段 - 占据一半宽度的字段  
      if (ctype.includes('选择日期时间') ||
          ctype.includes('选择日期') ||
          ctype.includes('级联选择') ||
          cnName.includes('日期') ||
          cnName.includes('时间') ||
          cnName.includes('金额') ||
          cnName.includes('价格') ||
          cnName.includes('费用') ||
          cnName.includes('数量') ||
          cnName.includes('面积') ||
          cnName.includes('高度') ||
          cnName.includes('重量')) {
        return 'field-half'
      }
      
      // 三分之一宽度字段 - 较短的输入字段
      if (cnName.includes('编号') ||
          cnName.includes('代码') ||
          cnName.includes('序号') ||
          cnName.includes('类型') ||
          cnName.includes('状态') ||
          cnName.includes('等级') ||
          cnName.includes('级别') ||
          cnName.length <= 4) {
        return 'field-third'
      }
      
      // 默认三分之一宽度
      return 'field-third'
    }

    // 获取操作按钮类型
    const getActionButtonType = (ctype) => {
      switch (ctype) {
        case 'del':
          return 'danger'
        case 'edit':
          return 'primary'
        case 'copy':
          return 'warning'
        default:
          return 'primary'
      }
    }

    // 阻止全局拖拽默认行为
    const preventGlobalDrag = (e) => {
      // 检查是否在图片上传区域内
      const target = e.target
      const uploadArea = target.closest('.image-upload-container') || target.closest('.add-image-btn')
      
      // 如果不在上传区域内，阻止默认行为
      if (!uploadArea) {
        e.preventDefault()
        e.dataTransfer.dropEffect = 'none'
      }
    }

    // 从路由参数获取数据
    onMounted(() => {
      faid.value = Number(route.query.faid) || 0
      currentId.value = route.query.id || 0
      cxlx.value = Number(route.query.cxlx) || 0
      liuchengbh.value = route.query.liuchengbh || ''
      dtype.value = route.query.dtype || 'add'
      
      // 设置动态标题
      if (route.query.title) {
        pageTitle.value = decodeURIComponent(route.query.title)
      }
      
      // 获取jk_faid参数 - 这是关键参数
      const jk_faid = Number(route.query.jk_faid) || 0
      if (jk_faid > 0) {
        faid.value = jk_faid
      }
      
      // console.log('测试打印数据 编辑页面参数:', {
      //   faid: faid.value,
      //   id: currentId.value,
      //   cxlx: cxlx.value,
      //   liuchengbh: liuchengbh.value,
      //   dtype: dtype.value,
      //   jk_faid: jk_faid
      // })
      
      // 添加全局拖拽事件监听，防止页面被拖拽文件时打开新标签
      document.addEventListener('dragover', preventGlobalDrag)
      document.addEventListener('drop', preventGlobalDrag)
      
      loadData()
      onchange()
    })

    // 监听路由参数变化，当从添加页面返回时重新加载数据
    watch(() => route.query, (newQuery, oldQuery) => {
      // console.log('测试打印数据 路由参数变化:', newQuery, oldQuery)
      
      // 检查关键参数是否发生变化
      const shouldReload = 
        Number(newQuery.faid) !== Number(oldQuery.faid) ||
        Number(newQuery.jk_faid) !== Number(oldQuery.jk_faid) ||
        newQuery.id !== oldQuery.id ||
        Number(newQuery.cxlx) !== Number(oldQuery.cxlx) ||
        newQuery.liuchengbh !== oldQuery.liuchengbh ||
        newQuery.dtype !== oldQuery.dtype
      
      if (shouldReload) {
        // console.log('测试打印数据 检测到关键参数变化，重新加载数据')
        
        // 更新本地参数
        faid.value = Number(newQuery.faid) || 0
        // 处理jk_faid参数
        const jk_faid = Number(newQuery.jk_faid) || 0
        if (jk_faid > 0) {
          faid.value = jk_faid
        }
        currentId.value = newQuery.id || 0
        cxlx.value = Number(newQuery.cxlx) || 0
        liuchengbh.value = newQuery.liuchengbh || ''
        dtype.value = newQuery.dtype || 'add'
        
        // 重新加载数据
        loadData()
        onchange()
      }
    }, { deep: true })

    // 监听页面可见性变化，当页面重新可见时重新加载数据
    const handleVisibilityChange = () => {
      if (!document.hidden) {
        // console.log('测试打印数据 页面重新可见，检查是否需要重新加载数据')
        
        // 检查URL中是否有refresh参数或from参数，表示从其他页面返回
        const urlParams = new URLSearchParams(window.location.search)
        if (urlParams.get('refresh') === 'true' || urlParams.get('from')) {
          // console.log('测试打印数据 检测到返回标记，重新加载数据')
          loadData()
          
          // 清除refresh参数，避免重复加载
          if (urlParams.get('refresh')) {
            urlParams.delete('refresh')
            const newUrl = window.location.pathname + '?' + urlParams.toString()
            window.history.replaceState({}, '', newUrl)
          }
        }
      }
    }

    // 更新标签页标题
    const updateTabTitle = (title) => {
      try {
        // 使用全局方法更新标签标题
        if (window.updateTagTitle) {
          const success = window.updateTagTitle(route.path, title)
          if (success) {
            console.log('测试打印数据 标签页标题已更新:', title)
          } else {
            console.warn('测试打印数据 未找到对应的标签页:', route.path)
          }
        } else {
          console.warn('测试打印数据 updateTagTitle 方法不可用')
        }

        // 同时更新面包屑标题
        if (window.updateBreadcrumbTitle) {
          window.updateBreadcrumbTitle(title)
          console.log('测试打印数据 面包屑标题已更新:', title)
        } else {
          console.warn('测试打印数据 updateBreadcrumbTitle 方法不可用')
        }
      } catch (error) {
        console.log('更新标题失败:', error)
      }
    }

    onMounted(() => {
      // 添加页面可见性监听
      document.addEventListener('visibilitychange', handleVisibilityChange)
    })

    // 监听页面标题变化，自动更新浏览器标签页标题
    watchEffect(() => {
      document.title = pageTitle.value
    })

    // 在组件卸载前清理监听器
    onBeforeUnmount(() => {
      cleanup()
      // 清理全局拖拽事件监听器
      document.removeEventListener('dragover', preventGlobalDrag)
      document.removeEventListener('drop', preventGlobalDrag)
    })

    // 清理监听器
    const cleanup = () => {
      document.removeEventListener('visibilitychange', handleVisibilityChange)
    }

    // 加载数据
    const loadData = () => {
      // console.log('测试打印数据 开始加载数据')
      
      const bs64_cs = {
        dtype: dtype.value,
        id: currentId.value,
        qiyebh: '',
        key: '',
        cxlx: cxlx.value,
        img_is_zj: 0,
        openid: localStorage.getItem('openid') || '17532268374716034674',
        liuchengbh: liuchengbh.value
      }
      
      const cs = {
        ctype: 'app_zlxt_xq_edit',
        bs64_cs: base64.encode(JSON.stringify(bs64_cs)),
        bs64_obj: '',
        bs64_list: '',
        ids: '',
        faid: faid.value
      }
      
      // console.log('测试打印数据 请求参数:', cs)
      // console.log('测试打印数据 bs64_cs解码:', bs64_cs)
      
      postRequest('', cs).then(res => {
        // console.log('测试打印数据 接口返回:', res)
        // console.log('测试打印数据 返回数据中是否包含dzht_obj:', !!res.dzht_obj)
        // console.log('测试打印数据 返回数据中是否包含shuzu_dzhtsb:', !!res.shuzu_dzhtsb)
        
        if (res && res.zdlist) {
          // 赋值表单数据
          formdata.zdlist = res.zdlist
          formdata.anlist = res.anlist || []
          formdata.orderlist = res.orderlist || [0, 1, 2, 3]
          formdata.caogao_save = res.caogao_save || false
          formdata.shuzu_sb = res.shuzu_sb || []
          formdata.zib_zd_list = res.zib_zd_list || null
          formdata.zib_tab_list = res.zib_tab_list || null
          formdata.imgs = res.imgs || null
          formdata.dzht_obj = res.dzht_obj || null
          formdata.shuzu_dzhtsb = res.shuzu_dzhtsb || []
          
          // 设置动态标题
          if (res.ckbiaoti) {
            pageTitle.value = res.ckbiaoti
            // 延迟更新标签页标题，确保 TagsView 组件已加载
            setTimeout(() => {
              updateTabTitle(res.ckbiaoti)
            }, 100)
            // console.log('测试打印数据 设置页面标题:', res.ckbiaoti)
          }
          
          // console.log('测试打印数据 formdata.zdlist赋值后:', formdata.zdlist)
          // console.log('测试打印数据 formdata.dzht_obj赋值后:', formdata.dzht_obj)
          // console.log('测试打印数据 formdata.shuzu_dzhtsb赋值后:', formdata.shuzu_dzhtsb)
          // console.log('测试打印数据 formdata.zdlist.length:', formdata.zdlist.length)
          // console.log('测试打印数据 完整formdata对象:', formdata)
          // console.log('测试打印数据 formdata.dzht_obj类型:', typeof formdata.dzht_obj)
          // console.log('测试打印数据 formdata.shuzu_dzhtsb类型:', typeof formdata.shuzu_dzhtsb)
          
          // 赋值表单对象
          if (res.obj) {
            Object.keys(obj).forEach(key => delete obj[key])
            Object.assign(obj, res.obj)
          }
          
          // 处理编辑模式
          if (res.obj && res.obj.id > 0) {
            dtype.value = 'edit'
            currentId.value = res.obj.id
          }
          
          // 处理隐藏字段
          if (res.hidezdlist) {
            hidezdlist.value = res.hidezdlist
          }
          
          // 分析隐藏字段逻辑
          analyse(res)
        } else {
          console.log('数据加载失败')
        }
      }).catch(error => {
        // console.error('测试打印数据 请求失败:', error)
        ElMessage.error('请求失败')
      })
    }

    // 分析隐藏字段
    const analyse = (info) => {
      const zdlistFun = info.zdlist
      const objFun = info.obj
      
      zdlistFun.forEach((item, index) => {
        if (item.hide_zdlist && item.hide_zdlist.length > 0) {
          if (objFun[item.en_name] && objFun[item.en_name].length > 0) {
            const hidelist = item.hide_zdlist
            const foundIndex = hidelist.findIndex(itemn => itemn.value == objFun[item.en_name])
            
            if (foundIndex > -1) {
              formdata.zdlist[index].tishi = hidelist[foundIndex].z_tishi
              hidezdlist.value = hidezdlist.value.concat(hidelist[foundIndex].hide_zdlist)
            }
          }
        }
      })
    }

    // 保存数据 - 按照uni-app原版逻辑
    const saveShuju = (csstype) => {
      // console.log('测试打印数据 开始保存:', csstype)
      
      const objCopy = JSON.parse(JSON.stringify(obj))
      const zdlist = JSON.parse(JSON.stringify(formdata.zdlist))
      
      // 必填字段验证 - 按照uni-app原版逻辑
      if (formdata.caogao_save) {
        for (let item of zdlist) {
          if (item.bitian > 0) {
            if (!hidezdlist.value.includes(item.en_name)) {
              const fieldValue = objCopy[item.en_name]
              if (fieldValue === null || fieldValue === undefined || fieldValue === '' || 
                  (Array.isArray(fieldValue) && fieldValue.length === 0)) {
                ElMessage.error(item.cn_name + '不能为空')
                return
              }
            }
          }
        }
      }
      
      // 处理开始截止日期字段
      zdlist.forEach((item) => {
        if (item.ctype === '选择开始截止日期' && objCopy[item.en_name]) {
          if (Array.isArray(objCopy[item.en_name])) {
            objCopy[item.en_name] = objCopy[item.en_name].join('至')
          }
        }
      })
      
      const bs64_cs = {
        id: objCopy.id || null,
        openid: localStorage.getItem('openid') || '17532268374716034674', 
        yewuy: '',
        key: ''
      }
      
      const canshu = {
        ctype: csstype.jk_type || 'app_zlxt_xq_save',
        bs64_cs: base64.encode(JSON.stringify(bs64_cs)),
        bs64_obj: base64.encode(JSON.stringify(objCopy)),
        bs64_list: base64.encode(JSON.stringify(formdata.shuzu_sb || [])),
        ids: '',
        faid: faid.value
      }
      
      const cs = { canshu }
      
      // console.log('测试打印数据 保存请求参数:', cs)
      // console.log('测试打印数据 请求地址: https://vue.haozskj.com/xcx/ajax/Ajax_apppost.ashx')
      
      // 使用正确的请求格式
      postRequest('xcx/ajax/Ajax_apppost.ashx', cs).then(res => {
        // console.log('测试打印数据 保存返回:', res)
        if (res.leixing === 'ok') {
          ElMessage.success('保存成功')
          currentId.value = res.id
          
          if (csstype.wc_fanhui > 0) {
            setTimeout(() => {
              window.history.back()
            }, 2000)
          } else {
            setTimeout(() => {
              loadData()
            }, 2000)
          }
        } else {
          ElMessage.error(res.msg || '保存失败')
        }
      }).catch(error => {
        // console.error('测试打印数据 保存失败:', error)
        ElMessage.error('保存请求失败')
      })
    }

    // 跳转到详情页的统一方法
    const goToDetailPage = () => {
      // 生成唯一的tabId
      const tabId = `detail_${obj.id || currentId.value}_${Date.now()}`
      
      // 生成动态标题，使用保存后的数据或页面标题
      let dynamicTitle = '详情'
      if (obj.dbiaoti) {
        dynamicTitle = `${obj.dbiaoti}详情`
      } else if (pageTitle.value && pageTitle.value !== '合同流程编辑') {
        dynamicTitle = pageTitle.value.replace('新增', '').replace('编辑', '') + '详情'
      }
      
      const detailParams = {
        faid: faid.value,
        id: obj.id || currentId.value,
        cxlx: cxlx.value,
        liuchengbh: liuchengbh.value,
        tabId: tabId,
        title: encodeURIComponent(dynamicTitle)
      }
      
      // console.log('测试打印数据 跳转到详情页参数:', detailParams)
      
      // 跳转到详情页 hetonglcxq
      router.push({
        path: '/business/hetonglcxq/hetonglcxq',
        query: detailParams
      })
    }

    // 流程提交
    const liucheng_tijiao = () => {
      // 必填字段验证
      const objCopy = JSON.parse(JSON.stringify(obj))
      const zdlist = JSON.parse(JSON.stringify(formdata.zdlist))
      
      for (let item of zdlist) {
        if (item.bitian > 0) {
          if (!hidezdlist.value.includes(item.en_name)) {
            const fieldValue = objCopy[item.en_name]
            if (fieldValue === null || fieldValue === undefined || fieldValue === '' ||
                (Array.isArray(fieldValue) && fieldValue.length === 0)) {
              ElMessage.error(item.cn_name + '不能为空')
              return
            }
          }
        }
      }
      
      const bs64_cs = {
        id: obj.id,
        liuchengbh: obj.liuchengbh,
        liuchengzxbh: obj.liuchengzxbh,
        jiedianbh: obj.liuchengzxjdbh,
        pinglunlx: 0,
        banliren: '',
        pinglun: '发布成功',
        openid: localStorage.getItem('openid') || '17532268374716034674'
      }
      
      const canshu = {
        ctype: 'app_pinglun_save',
        bs64_cs: base64.encode(JSON.stringify(bs64_cs)),
        bs64_obj: '',
        bs64_list: '',
        ids: '',
        faid: 0
      }
      
      const cs = { canshu }
      
      postRequest('xcx/ajax/Ajax_apppost.ashx', cs).then(res => {
        if (res.leixing === 'ok') {
          ElMessage.success('提交成功')
          
          // 测试打印数据 按照 uniapp 模板逻辑，提交成功后跳转到详情页
          setTimeout(() => {
            goToDetailPage()
          }, 2000)
        } else {
          ElMessage.error(res.msg || '提交失败')
        }
      }).catch(error => {
        // console.error('测试打印数据 提交失败:', error)
        ElMessage.error('提交请求失败')
      })
    }

    // 参数选择相关方法
    const xzCanShu = (item, index, wtype) => {
      // console.log('测试打印数据 xzCanShu 调用:', { item, index, wtype })
      
      // 处理上传类型字段，不执行参数选择
      if (item.ctype === '上传营业执照' || item.ctype === '上传身份证正面' || 
          item.ctype === '上传身份证反面' || item.ctype === '上传选择营业执照' || 
          item.ctype === '上传选择身份证正面' || item.ctype === '上传选择身份证反面' || 
          item.ctype === '级联选择') {
        // 这些类型不执行参数选择
        return
      }
      
      // 处理综合字段 - 按照uni-app逻辑，先处理综合字段，再处理普通参数选择
      if (item.zh_zdlist && item.zh_zdlist.length > 0) {
        Zhlist.value = item
        item.zh_zdlist.forEach((field) => {
          if (field.zhi_list && field.zhi_list.length > 0) {
            Zhmoban.value[field.en_name] = field.zhi_list[0]
          } else {
            Zhmoban.value[field.en_name] = ''
          }
        })
        showZhPopup.value = true
        return
      }
      
      // 其他参数选择
      xzDanCanShu(item, index, wtype)
    }

    const xzDanCanShu = (item, index, wtype) => {
      // console.log('测试打印数据 xzDanCanShu 调用:', { item, index, wtype })
      
      const e = JSON.parse(JSON.stringify(item))
      lsobj.value = e
      infoIndex.value = index
      gzqx.value = e.addgzqx || 0
      gzxbs.value = wtype
      
      if (e.addgzqx > 0) {
        // 多项明细处理
        const lsobjs = e.fz_zdlist[wtype]
        if (lsobjs && lsobjs.wtype && lsobjs.zhidu > 0) {
          jkgongshi.value = lsobjs.jkgongshi || []
          dx.value = lsobjs.duoxuan || 0
          
          const bs64_cs = {
            wtype: e.ctype === '双按钮选择数据' ? wtype : lsobjs.wtype,
            pagenumber: 0,
            bumenbh: obj.bumenbh || null,
            cxlx: cxlx.value,
            key: key.value,
            openid: localStorage.getItem('openid') || '17532268374716034674'
          }
          
          const canshu = {
            ctype: 'app_xuanze_canshu',
            bs64_cs: base64.encode(JSON.stringify(bs64_cs)),
            bs64_obj: base64.encode(JSON.stringify(obj)),
            bs64_list: '',
            ids: '',
            faid: faid.value,
            // zub_faid: faid.value
          }
          
          const cs = { canshu }
          
          postRequest('xcx/ajax/Ajax_apppost.ashx', cs).then(res => {
            if (res && res.shuzu) {
              xzlist.value = res.shuzu
              kongobj.value = res.kongobj || {}
              showPopup.value = true
            }
          }).catch(error => {
            console.log('测试打印数据 参数选择失败:', error)
          })
        }
      } else {
        // 普通字段处理
        if (lsobj.value.wtype && lsobj.value.zhidu > 0) {
          jkgongshi.value = lsobj.value.jkgongshi || []
          dx.value = lsobj.value.duoxuan || 0
          
          const bs64_cs = {
            wtype: e.ctype === '双按钮选择数据' ? wtype : lsobj.value.wtype,
            pagenumber: 0,
            bumenbh: obj.bumenbh || null,
            cxlx: cxlx.value,
            key: key.value,
            openid: localStorage.getItem('openid') || '17532268374716034674'
          }
          
          const canshu = {
            ctype: 'app_xuanze_canshu',
            bs64_cs: base64.encode(JSON.stringify(bs64_cs)),
            bs64_obj: base64.encode(JSON.stringify(obj)),
            bs64_list: '',
            ids: '',
            faid: faid.value,
            // zub_faid: faid.value
          }
          
          const cs = { canshu }
          
          postRequest('xcx/ajax/Ajax_apppost.ashx', cs).then(res => {
            if (res && res.shuzu) {
              xzlist.value = res.shuzu
              kongobj.value = res.kongobj || {}
              showPopup.value = true
            } else {
              ElMessage.warning('暂无可选择的参数')
            }
          }).catch(error => {
            // console.error('测试打印数据 参数选择失败:', error)
            ElMessage.error('参数加载失败')
          })
        }
      }
    }

    // 其他方法
    const addgz = (item) => {
      if (!obj[item.en_name]) {
        obj[item.en_name] = []
      }
      
      const moban = JSON.parse(JSON.stringify(item.moban || {}))
      
      if (!item.moban && item.fz_zdlist) {
        const newItem = {}
        item.fz_zdlist.forEach(field => {
          newItem[field.en_name] = field.zdtype === 'number' ? 0 : ''
        })
        obj[item.en_name].push(newItem)
      } else {
        obj[item.en_name].push(moban)
      }
    }

    const delmx = (fieldName, index) => {
      if (obj[fieldName] && obj[fieldName].length > index) {
        obj[fieldName].splice(index, 1)
      }
    }

    const chooseImage = (item, type) => {
      // 创建文件选择器
      const input = document.createElement('input')
      input.type = 'file'
      // 支持图片、PDF、Word、Excel、zip、rar、txt
      input.accept = 'image/*,application/pdf,.doc,.docx,.xls,.xlsx,.zip,.rar,.txt'
      input.onchange = async (event) => {
        const files = Array.from(event.target.files)
        if (files.length === 0) return
        
        const file = files[0]
        
        // 构建FormData
        const formData = new FormData()
        formData.append('file', file)
        formData.append('ctype', type || getCTypeByItemType(item.ctype))
        formData.append('imgleixing', '')
        formData.append('shuiyin', '1')
        formData.append('id', '0')
        formData.append('tupianbt', getTupianbtByType(item.ctype))
        formData.append('zileix', 'img_sfz')
        formData.append('leixingbh', obj.qiyebh || '')
        formData.append('username', localStorage.getItem('username') || '')
        formData.append('jiedaodizhi', '')
        
        try {
          const response = await fetch('https://vue.haozskj.com/xcx/ajax/imgUpload_zj.ashx', {
            method: 'POST',
            body: formData
          })
          
          const result = await response.json()
          // console.log('测试打印数据 图片上传返回:', result)
          
          if (result.msg !== '操作失败！') {
            // 根据jkgongshi配置自动填充字段
            if (item.jkgongshi) {
              item.jkgongshi.forEach(config => {
                if (config.zbzd in result && config.fbzd in obj) {
                  obj[config.fbzd] = result[config.zbzd]
                }
              })
            }
            ElMessage.success('图片上传成功')
          } else {
            ElMessage.error('图片上传失败')
          }
        } catch (error) {
          // console.error('测试打印数据 图片上传失败:', error)
          ElMessage.error('图片上传失败')
        }
      }
      input.click()
    }

    // 辅助方法
    const getCTypeByItemType = (itemType) => {
      const typeMap = {
        '上传身份证反面': 'app_shenfenzfm_sb',
        '上传选择身份证反面': 'app_shenfenzfm_sb',
        '上传身份证正面': 'app_shenfenz_sb',
        '上传选择身份证正面': 'app_shenfenz_sb',
        '上传营业执照': 'app_yingyezz_sb',
        '上传选择营业执照': 'app_yingyezz_sb'
      }
      return typeMap[itemType] || 'app_shenfenz_sb'
    }

    const getTupianbtByType = (itemType) => {
      if (itemType.includes('营业执照')) {
        return '营业执照识别'
      }
      return '身份证识别'
    }

    const nullFun = (item) => {
      return item === null || item === undefined ? '' : item
    }

    const getButtonType = (ctype) => {
      const typeMap = {
        'save_houtai': 'primary',
        'tijiao': 'success',
        'del': 'danger',
        'fanhui': 'info'
      }
      return typeMap[ctype] || 'default'
    }

    // 级联选择相关
    const onchange = () => {
      const bs64_cs = {
        wtype: 'app_xzsheng_shi',
        pagenumber: 0,
        bumenbh: obj.bumenbh || null,
        cxlx: cxlx.value,
        key: key.value,
        openid: localStorage.getItem('openid') || '17532268374716034674'
      }
      
      const canshu = {
        ctype: 'app_xuanze_canshu',
        bs64_cs: base64.encode(JSON.stringify(bs64_cs)),
        bs64_obj: '',
        bs64_list: '',
        ids: '',
        faid: faid.value,
        // zub_faid: faid.value
      }
      
      const cs = { canshu }
      
      postRequest('xcx/ajax/Ajax_apppost.ashx', cs).then(res => {
        dataTree.value = res.shuzu || []
      }).catch(error => {
        // console.error('测试打印数据 获取级联数据失败:', error)
      })
    }

    const onechange = (item, value) => {
      if (value && value.length > 0) {
        const titles = value.map(v => v.label || v.text || v)
        obj[item.en_name] = titles.join('/')
      }
    }

    // 参数选择弹窗方法
    const cxDanCanShu = () => {
      if (lsobj.value.addgzqx > 0) {
        xzDanCanShu(lsobj.value.fz_zdlist[gzxbs.value])
      } else {
        xzDanCanShu(lsobj.value, infoIndex.value, gzxbs.value)
      }
    }

    const selectItem = (item, index) => {
      // console.log('测试打印数据 selectItem:', item, index)
      
      // 处理隐藏字段逻辑
      const hidelist = lsobj.value.hide_zdlist || []
      
      if (dx.value === 0) {
        // 单选模式
        // 处理隐藏字段显示/隐藏逻辑
        if (hidelist.length > 0) {
          const foundHideItem = hidelist.find(itemn => itemn.value === item.biaoti)
          if (foundHideItem) {
            // 设置提示信息
            formdata.zdlist[infoIndex.value].tishi = foundHideItem.z_tishi
            // 添加要隐藏的字段
            hidezdlist.value = hidezdlist.value.concat(foundHideItem.hide_zdlist)
            // 移除要显示的字段
            const itemsToRemove = foundHideItem.show_zdlist || []
            hidezdlist.value = hidezdlist.value.filter(item => !itemsToRemove.includes(item))
          }
        }
        
        const cs = JSON.parse(JSON.stringify(item))
        
        // 根据是否是工作权限处理不同的赋值逻辑
        if (gzqx.value === 1) {
          // 明细数据处理
          if (jkgongshi.value) {
            jkgongshi.value.forEach(config => {
              if (config.zbzd in cs.obj && config.fbzd in obj) {
                if (item.biaoti === "其他") {
                  obj[lsobj.value.en_name][infoIndex.value][lsobj.value.fz_zdlist[gzxbs.value].en_name] = formdata.zdlist[infoIndex.value].qitazd
                } else {
                  obj[lsobj.value.en_name][infoIndex.value][lsobj.value.fz_zdlist[gzxbs.value].en_name] = cs.obj[config.zbzd]
                }
              }
            })
          }
        } else {
          // 普通字段处理
          if (jkgongshi.value) {
            jkgongshi.value.forEach(config => {
              if (config.zbzd in cs.obj && config.fbzd in obj) {
                if (item.biaoti === "其他") {
                  obj[config.fbzd] = formdata.zdlist[infoIndex.value].qitazd
                } else {
                  obj[config.fbzd] = cs.obj[config.zbzd]
                }
              }
            })
          }
        }
        
        showPopup.value = false
        key.value = ''
      } else {
        // 多选模式
        item.check = item.check === 0 ? 1 : 0
      }
    }

    const toggleAll = () => {
      xzlist.value.forEach(item => {
        item.check = item.check === 0 ? 1 : 0
      })
    }

    const notarize = () => {
      // 确认多选结果
      const keys = Object.keys(kongobj.value)
      xzlist.value.forEach(item => {
        if (item.check === 1) {
          keys.forEach(key => {
            if (key === 'ids') {
              if (kongobj.value.ids === '') {
                kongobj.value.ids = item.obj.id
              } else {
                kongobj.value.ids += ',' + item.obj.id
              }
            } else {
              const names = item.obj[key] === '其他' ? formdata.zdlist[infoIndex.value].qitazd : item.obj[key]
              if (kongobj.value[key] === '') {
                kongobj.value[key] = names
              } else {
                kongobj.value[key] += ',' + names
              }
            }
          })
        }
      })
      
      const cs = kongobj.value
      if (jkgongshi.value) {
        jkgongshi.value.forEach(config => {
          if (config.zbzd in cs && config.fbzd in obj) {
            obj[config.fbzd] = cs[config.zbzd]
          }
        })
      }
      
      showPopup.value = false
      key.value = ''
    }

    const empty = () => {
      const cs = kongobj.value
      if (jkgongshi.value) {
        jkgongshi.value.forEach(config => {
          if (config.zbzd in cs) {
            if (gzqx.value === 1) {
              // 明细数据处理
              if (config.fbzd in obj[lsobj.value.en_name][infoIndex.value]) {
                obj[lsobj.value.en_name][infoIndex.value][lsobj.value.fz_zdlist[gzxbs.value].en_name] = cs[config.zbzd]
              }
            } else {
              // 普通字段处理
              if (config.fbzd in obj) {
                obj[config.fbzd] = cs[config.zbzd]
              }
            }
          }
        })
      }
      showPopup.value = false
      key.value = ''
    }

    // 综合字段弹窗方法
    const validateAndSubmit = () => {
      const isAllFilled = Object.values(Zhmoban.value).every(value => {
        return value !== null && value !== undefined && 
               (typeof value !== 'string' || value.trim() !== '')
      })
      
      if (!isAllFilled) {
        ElMessage.warning('请填写完整数据')
        return
      }
      
      const rawText = Zhlist.value.zh_zfc || ''
      const replacedText = rawText.replace(/_([a-zA-Z0-9]+)_/g, (match, key) => {
        return Zhmoban.value[key] || match
      })
      
      obj[Zhlist.value.en_name] = replacedText
      showZhPopup.value = false
    }

    const clearFormValues = () => {
      obj[Zhlist.value.en_name] = ''
      showZhPopup.value = false
    }

    // 图片预览
    const previewImage = (url) => {
      window.open(url, '_blank')
    }

    // 按钮点击处理
    const dialogClick = (item) => {
      // console.log('测试打印数据 按钮点击:', item)
      
      if (item.querents && item.querents.length > 0) {
        ElMessageBox.confirm(item.querents, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          toUrl_pinglun(item)
        }).catch(() => {
          console.log('用户取消操作')
        })
      } else {
        toUrl_pinglun(item)
      }
    }

    // 完全按照uniapp的toUrl_pinglun方法实现 - 动态处理各种ctype
    const toUrl_pinglun = (item) => {
      console.log('按钮处理:', item)
      const css = JSON.parse(JSON.stringify(item))
      
      // 按照uniapp逻辑处理各种ctype
      if (css.ctype === 'fanhui') {
        Anshow.value = false
        router.back()
      } else if (css.ctype === 'shouye') {
        Anshow.value = false
        router.push('/')
      } else if (css.ctype === 'save_houtai') {
        Anshow.value = false
        saveShuju(css)
      } else if (css.ctype === 'tijiao') {
        Anshow.value = false
        liucheng_tijiao()
      } else if (css.ctype === 'del') {
        Anshow.value = false
        DelData()
      } else if (css.ctype === 'wancheng_httj') {
        Anshow.value = false
        Httj(css)
      } else if (css.ctype === 'tongyi_httj') {
        Anshow.value = false
        Httj(css)
      } else if (css.ctype === 'dzq_shengcheng') {
        Anshow.value = false
        saveDianziq()
      } else if (css.ctype === 'dzq_yulan') {
        Anshow.value = false
        downOpenFile(css.url)
      } else if (css.ctype === 'dzq_faqi') {
        Anshow.value = false
        faqiDianziq()
      } else if (css.ctype === 'dzq_chakan') {
        Anshow.value = false
        chakanDianziq(css)
      } else if (css.ctype === 'dzq_shengcheng_bdxt') {
        Anshow.value = false
        saveDianziqBD(css)
      } else if (css.ctype === 'dzq_zuofei') {
        Anshow.value = false
        cancellation()
      } else if (css.ctype === 'pinglun') {
        Anshow.value = false
        saveWancheng()
      } else if (css.ctype === 'shuaxin') {
        Anshow.value = false
        ElMessage.success('刷新成功')
        loadData()
      } else if (css.ctype === 'gengduo') {
        Anshow.value = !Anshow.value
      } else {
        // 对于未知的ctype，显示提示而不是写死处理
        console.log('未处理的按钮类型:', css.ctype, css)
        ElMessage.info(`执行操作: ${css.biaoti || css.ctype}`)
      }
    }

    // 添加缺失的方法
    const closeZhPopup = () => {
      showZhPopup.value = false
    }

    const logout = () => {
      showBtnPopup.value = false
      toUrl_pinglun(dialogObj.value)
    }

    const cancelLogout = () => {
      showBtnPopup.value = false
    }

    // 子表相关方法
    const toUrl_addshebei = (faid) => {
      // console.log('测试打印数据 添加设备信息:', faid)
      
      // 打开设备编辑弹窗
      deviceEditParams.value = {
        faid: faid,
        cxlx: cxlx.value,
        liuchengbh: liuchengbh.value,
        formObj: obj,
        dtype: 'add',
        isEdit: false,
        zub_faid: faid
      }
      
      currentDeviceIndex.value = -1 // 新增设备
      showDeviceDialog.value = true
      
      // console.log('测试打印数据 打开设备添加弹窗，参数:', deviceEditParams.value)
    }

    const toUrl_addshebeiT = (table) => {
      // console.log('测试打印数据 添加设备信息T:', table)
      
      // 打开设备编辑弹窗
      deviceEditParams.value = {
        faid: table.faid || faid.value,
        cxlx: cxlx.value,
        liuchengbh: liuchengbh.value,
        formObj: obj,
        dtype: 'add',
        isEdit: false,
        zub_faid: table.faid || faid.value,
        table: table
      }
      
      currentDeviceIndex.value = -1 // 新增设备
      showDeviceDialog.value = true
      
      // console.log('测试打印数据 打开设备添加弹窗T，参数:', deviceEditParams.value)
    }

    // 设备保存成功处理
    const handleDeviceSaveSuccess = (result) => {
      // console.log('测试打印数据 设备保存成功:', result)
      // console.log('测试打印数据 设备保存成功-数据部分:', result.data)
      
      // 确保 formdata.zib_zd_list 存在
      if (!formdata.zib_zd_list) {
        formdata.zib_zd_list = {
          faid: 0,
          biaoti: '租赁设备',
          jllist: [],
          x_anlist: [
            { biaoti: '复制', ctype: 'copy' },
            { biaoti: '删除', ctype: 'del' }
          ]
        }
      }

      // 构建设备显示对象，完全按照uni-app的数据结构
      const deviceDisplay = {
        dbiaoti: result.data.shebeilx || '剪叉式', // 使用 shebeilx 字段作为设备标题
        faid: formdata.zib_zd_list.faid,
        hlist: buildDeviceDisplayList(result.data),
        id: result.data.id || 0
      }
      
      // console.log('测试打印数据 构建的设备显示对象:', deviceDisplay)
      
      // 如果是新增设备
      if (result.index === null || result.index === -1) {
        formdata.zib_zd_list.jllist.push(deviceDisplay)
        ElMessage.success('设备添加成功')
        
        // 同步到 shuzu_sb
        if (!formdata.shuzu_sb) {
          formdata.shuzu_sb = []
        }
        formdata.shuzu_sb.push(result.data)
      } else {
        // 编辑模式：更新现有设备
        if (formdata.zib_zd_list.jllist[result.index]) {
          formdata.zib_zd_list.jllist[result.index] = deviceDisplay
          ElMessage.success('设备更新成功')
          
          // 同步到 shuzu_sb
          if (formdata.shuzu_sb && formdata.shuzu_sb[result.index]) {
            formdata.shuzu_sb[result.index] = result.data
          }
        }
      }
      
      // 关闭弹窗
      showDeviceDialog.value = false
      // console.log('测试打印数据 最终设备列表：', formdata.zib_zd_list.jllist)
    }

    // 构建设备显示列表 - 完全按照您提供的截图样式
    const buildDeviceDisplayList = (data) => {
      // console.log('测试打印数据 构建设备显示列表，原始数据:', data)
      const list = []
      
      // 平台高度 (使用 shebeigd 字段)
      if (data.shebeigd) {
        const height = data.shebeigd.toString().replace('米', '') // 去掉可能存在的"米"字
        list.push({ neirong: `平台高度：${height}米` })
      }
      
      // 预计数量(台) (使用 shebeisl 字段)
      if (data.shebeisl !== undefined && data.shebeisl !== null) {
        list.push({ neirong: `预计数量(台)：${data.shebeisl}` })
      }
      
      // 日租单价 (使用 tianzuj 字段)
      if (data.tianzuj !== undefined && data.tianzuj !== null) {
        list.push({ neirong: `日租单价：${data.tianzuj}` })
      }
      
      // 月租单价 (使用 yuezuj 字段)
      if (data.yuezuj !== undefined && data.yuezuj !== null) {
        list.push({ neirong: `月租单价：${data.yuezuj}` })
      }
      
      // 预计租期 (使用 yujizq 字段)
      if (data.yujizq) {
        list.push({ neirong: `预计租期：${data.yujizq}` })
      } else {
        list.push({ neirong: `预计租期：` })
      }
      
      // 最短租期 (使用 zuiduanzqt 字段)
      if (data.zuiduanzqt) {
        list.push({ neirong: `最短租期：${data.zuiduanzqt}` })
      } else {
        list.push({ neirong: `最短租期：` })
      }
      
      // 进退场运费 (使用 yunfei 字段)
      if (data.yunfei !== undefined && data.yunfei !== null) {
        list.push({ neirong: `进退场运费(元/台)：${data.yunfei}` })
      } else {
        list.push({ neirong: `进退场运费(元/台)：0` })
      }
      
      // console.log('测试打印数据 构建完成的显示列表:', list)
      return list
    }

    const toUrl_xq = (item, edit) => {
      console.log('查看详情:', item, edit)
      // 这里可以根据需要跳转到详情页面
    }

    const editSb = (index, edit) => {
      // console.log('测试打印数据 编辑设备:', index, edit)
      
      // 获取要编辑的设备数据
      if (formdata.zib_zd_list && formdata.zib_zd_list.jllist && formdata.zib_zd_list.jllist[index]) {
        const deviceDisplay = formdata.zib_zd_list.jllist[index]
        
        // 从shuzu_sb中获取原始设备数据
        let originalDeviceData = null
        if (formdata.shuzu_sb && formdata.shuzu_sb[index]) {
          originalDeviceData = formdata.shuzu_sb[index]
        }
        
        // 打开设备编辑弹窗
        deviceEditParams.value = {
          faid: formdata.zib_zd_list.faid || faid.value,
          cxlx: cxlx.value,
          liuchengbh: liuchengbh.value,
          formObj: obj,
          dtype: 'edit',
          isEdit: true,
          editData: originalDeviceData, // 使用原始数据
          zub_faid: formdata.zib_zd_list.faid || faid.value,
          id: deviceDisplay.id,
          index: index // 传递索引用于更新
        }
        
        currentDeviceIndex.value = index
        showDeviceDialog.value = true
        
        // console.log('测试打印数据 打开设备编辑弹窗，原始数据:', originalDeviceData)
        // console.log('测试打印数据 编辑弹窗参数:', deviceEditParams.value)
      }
    }

    const operate = (index, ctype) => {
      if (ctype === 'del') {
        ElMessageBox.confirm('删除数据无法恢复,是否确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (formdata.zib_zd_list && formdata.zib_zd_list.jllist) {
            formdata.zib_zd_list.jllist.splice(index, 1)
            if (formdata.shuzu_sb) {
              formdata.shuzu_sb.splice(index, 1)
            }
            ElMessage.success('设备已删除')
          }
        }).catch(() => {
          console.log('用户取消删除')
        })
      } else if (ctype === 'fuzhi') {
        // console.log('测试打印数据 复制设备:', index)
        
        // 获取要复制的设备数据
        if (formdata.zib_zd_list && formdata.zib_zd_list.jllist && formdata.zib_zd_list.jllist[index]) {
          const deviceDisplay = formdata.zib_zd_list.jllist[index]
          
          // 从shuzu_sb中获取原始设备数据，因为显示数据是经过处理的
          let originalDeviceData = null
          if (formdata.shuzu_sb && formdata.shuzu_sb[index]) {
            originalDeviceData = { ...formdata.shuzu_sb[index] }
          } else {
            // 如果没有原始数据，尝试从显示数据重构
            originalDeviceData = {
              shebeilx: deviceDisplay.dbiaoti || '剪叉式',
              id: null, // 复制时不要ID
              shebeigd: '',
              shebeisl: '',
              tianzuj: '',
              yuezuj: '',
              yujizq: '',
              zuiduanzqt: '',
              yunfei: null
            }
          }
          
          // 删除ID，作为新设备
          delete originalDeviceData.id
          
          // 打开设备编辑弹窗（复制模式）
          deviceEditParams.value = {
            faid: formdata.zib_zd_list.faid || faid.value,
            cxlx: cxlx.value,
            liuchengbh: liuchengbh.value,
            formObj: obj,
            dtype: 'add',
            isCopy: true,
            editData: originalDeviceData, // 使用原始设备数据
            zub_faid: formdata.zib_zd_list.faid || faid.value,
            index: -1 // 新增模式
          }
          
          currentDeviceIndex.value = -1 // 复制时设为新增
          showDeviceDialog.value = true
          
          // console.log('测试打印数据 打开设备复制弹窗，原始数据:', originalDeviceData)
          // console.log('测试打印数据 复制弹窗参数:', deviceEditParams.value)
          ElMessage.info('已复制设备信息，请修改后保存')
        }
      } else if (ctype === 'edit') {
        // 编辑设备
        editSb(index, true)
      }
    }

    const operates = (table, btn, index) => {
      if (btn.ctype === 'del') {
        ElMessageBox.confirm('删除数据无法恢复,是否确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 删除逻辑
          const bs64_cs = {
            openid: localStorage.getItem('openid') || '17532268374716034674',
            id: table.jllist[index].id
          }
          
          const canshu = {
            ctype: btn.jk_type,
            bs64_cs: base64.encode(JSON.stringify(bs64_cs)),
            bs64_obj: '',
            bs64_list: '',
            ids: '',
            faid: table.faid
          }
          
          const cs = { canshu }
          
          postRequest('xcx/ajax/Ajax_apppost.ashx', cs).then(res => {
            if (res.leixing === 'ok') {
              ElMessage.success('设备已删除')
              setTimeout(() => {
                loadData()
              }, 2000)
            } else {
              ElMessage.error(res.msg || '删除失败')
            }
          }).catch(error => {
            console.log('删除失败:', error)
            ElMessage.error('删除请求失败')
          })
        }).catch(() => {
          console.log('用户取消删除')
        })
      } else if (btn.ctype === 'topage') {
        console.log('跳转页面:', btn)
        // 跳转逻辑
      } else if (btn.ctype === 'edit') {
        console.log('编辑:', btn)
        // 编辑逻辑
      }
    }

    // ============= 完全按照uniapp逻辑添加所有缺失的方法 =============
    
    // 删除数据 - 完全按照uniapp的DelData方法
    const DelData = async () => {
      try {
        isFormSaved.value = false
        
        const bs64_cs = {
          id: obj.id || currentId.value,
          openid: localStorage.getItem('openid') || "17524180246839845722"
        }

        const cs = {
          ctype: 'app_zlxt_xq_del',
          bs64_cs: Base64.encode(JSON.stringify(bs64_cs)),
          bs64_obj: '',
          bs64_list: '',
          ids: '',
          faid: faid.value
        }

        const res = await request.post(getApiPath(cs.ctype), { canshu: cs })
        
        if (res && res.leixing === 'ok') {
          ElMessage.success('删除成功')
          setTimeout(() => {
            router.go(-2) // 返回两级页面
          }, 1000)
        } else {
          ElMessage.error(res?.msg || '删除失败')
        }
      } catch (error) {
        console.log('删除失败:', error)
        ElMessage.error('删除失败')
      }
    }

    // HTTP提交 - 完全按照uniapp的Httj方法
    const Httj = async (css) => {
      try {
        isFormSaved.value = false
        
        const bs64_cs = {
          pinglun: css.biaoti || '',
          banliren: '',
          pinglunlx: css.pinglunlx || 0,
          id: obj.id || currentId.value,
          openid: localStorage.getItem('openid') || "17524180246839845722",
          liuchengbh: obj.liuchengbh || '',
          liuchengzxbh: obj.liuchengzxbh || '',
          jiedianbh: obj.liuchengzxjdbh || ''
        }

        const cs = {
          ctype: css.ctype,
          bs64_cs: Base64.encode(JSON.stringify(bs64_cs)),
          bs64_obj: '',
          bs64_list: '',
          ids: '',
          faid: faid.value
        }

        const res = await request.post(getApiPath(cs.ctype), { canshu: cs })
        
        if (res && res.leixing === 'ok') {
          ElMessage.success('操作成功')
          router.back()
        } else {
          ElMessage.error(res?.msg || '操作失败')
        }
      } catch (error) {
        console.log('HTTP提交失败:', error)
        ElMessage.error('操作失败')
      }
    }

    // 生成电子签 - 完全按照uniapp的saveDianziq方法
    const saveDianziq = async () => {
      try {
        console.log('测试打印数据 生成电子签参数:', {
          ctype: 'xcx_3_save_dianziht',
          bs64_cs: {
            hetongbh: obj.liuchengzxbh || '',
            xulieh: localStorage.getItem('xulieh') || ''
          },
          bs64_obj: formdata.dzht_obj,
          bs64_list: formdata.shuzu_dzhtsb
        })
        // console.log('测试打印数据 数据：', formdata.dzht_obj, formdata.shuzu_dzhtsb)
        
        const bs64_cs = {
          hetongbh: obj.liuchengzxbh || '',
          xulieh: localStorage.getItem('xulieh') || ''
        }

        // 确保数据存在且格式正确
        const dzhtObj = formdata.dzht_obj || {}
        const shuzuDzhtsb = formdata.shuzu_dzhtsb || []
        
        // console.log('测试打印数据 dzhtObj:', dzhtObj)
        // console.log('测试打印数据 shuzuDzhtsb:', shuzuDzhtsb)
        // console.log('测试打印数据 dzhtObj是否为对象:', typeof dzhtObj === 'object' && dzhtObj !== null)
        // console.log('测试打印数据 shuzuDzhtsb是否为数组:', Array.isArray(shuzuDzhtsb))
        
        const cs = {
          ctype: 'xcx_3_save_dianziht',
          bs64_cs: Base64.encode(JSON.stringify(bs64_cs)),
          bs64_obj: Base64.encode(JSON.stringify(dzhtObj)),
          bs64_list: Base64.encode(JSON.stringify(shuzuDzhtsb)),
          ids: '',
          faid: faid.value
        }
        
        // console.log('测试打印数据 发送的参数cs:', cs)

        const res = await request.post('https://fdddzq.haozskj.com/xcx/ajax/Ajax_fadadapost.ashx', { canshu: cs })
        
        // console.log('测试打印数据 完整返回数据:', res)
        // console.log('测试打印数据 返回数据中没有 dzht_obj 字段')
        
        if (res && res.leixing === 'ok') {
          ElMessage.success('生成成功')
          setTimeout(() => {
            loadData()
          }, 3000)
        } else {
          ElMessage.error(res?.msg || '生成失败')
        }
      } catch (error) {
        console.log('生成电子签失败:', error)
        ElMessage.error('生成失败')
      }
    }

    // 打开文件 - 完全按照uniapp的downOpenFile方法
    const downOpenFile = (curl) => {
      if (curl && curl.length > 10) {
        window.open(curl, '_blank')
      } else {
        ElMessage.warning('文件地址无效')
      }
    }

    // 发起电子签 - 完全按照uniapp的faqiDianziq方法
    const faqiDianziq = async () => {
      try {
        const bs64_cs = {
          liuchengzxbh: formdata.dzht_obj?.wenjianbh || '',
          xulieh: localStorage.getItem('xulieh') || ''
        }

        const cs = {
          ctype: 'xcx_3_faqi_dianziqian',
          bs64_cs: Base64.encode(JSON.stringify(bs64_cs)),
          bs64_obj: '',
          bs64_list: '',
          ids: '',
          faid: faid.value
        }

        const res = await request.post('https://fdddzq.haozskj.com/xcx/ajax/Ajax_fadadapost.ashx', { canshu: cs })
        
        if (res && res.leixing === 'ok') {
          ElMessage.success('发起成功')
          setTimeout(() => {
            loadData()
          }, 3000)
        } else {
          ElMessage.error(res?.msg || '发起失败')
        }
      } catch (error) {
        console.log('发起电子签失败:', error)
        ElMessage.error('发起失败')
      }
    }

    // 查看电子签 - 完全按照uniapp的chakanDianziq方法
    const chakanDianziq = async (item) => {
      if (item.url && item.url.length > 0) {
        downOpenFile(item.url)
      } else {
        await xiazaiDianziht(item)
      }
    }

    // 下载电子合同 - 完全按照uniapp的xiazaiDianziht方法
    const xiazaiDianziht = async (item) => {
      try {
        const bs64_cs = {
          liuchengzxbh: item.ctype === 'dzq_chakan' 
            ? formdata.dzht_obj?.wenjianbh || ''
            : obj.wenjianbh || ''
        }

        const cs = {
          ctype: 'fdd_huoqu_qianshuwendangxiazaidizhi_xcx',
          bs64_cs: Base64.encode(JSON.stringify(bs64_cs)),
          bs64_obj: '',
          bs64_list: '',
          ids: '',
          faid: faid.value
        }

        const res = await request.post('https://fdddzq.haozskj.com/xcx/ajax/Ajax_fadadapost.ashx', { canshu: cs })
        
        if (res && res.xiazaidz) {
          item.url = res.xiazaidz
          downOpenFile(res.xiazaidz)
        } else {
          ElMessage.error('获取下载地址失败')
        }
      } catch (error) {
        console.log('下载电子合同失败:', error)
        ElMessage.error('下载失败')
      }
    }

    // 生成电子签BD系统 - 完全按照uniapp的saveDianziqBD方法
    const saveDianziqBD = async (item) => {
      try {
        const bs64_cs = {
          hetongbh: obj.liuchengzxbh || '',
          xulieh: localStorage.getItem('xulieh') || ''
        }

        const cs = {
          ctype: item.ctype,
          bs64_cs: Base64.encode(JSON.stringify(bs64_cs)),
          bs64_obj: Base64.encode(JSON.stringify(formdata.dzht_obj || {})),
          bs64_list: Base64.encode(JSON.stringify(formdata.shuzu_dzhtsb || [])),
          ids: ''
        }

        const res = await request.post('https://vue.haozskj.com/xcx/Ajax/Ajax_apppost.ashx', { canshu: cs })
        
        if (res && res.leixing === 'ok') {
          ElMessage.success('生成成功')
          loadData()
        } else {
          ElMessage.error(res?.msg || '生成失败')
        }
      } catch (error) {
        console.log('生成BD系统电子签失败:', error)
        ElMessage.error('生成失败')
      }
    }

    // 作废 - 完全按照uniapp的cancellation方法
    const cancellation = async () => {
      try {
        const bs64_cs = {
          liuchengzxbh: obj.wenjianbh || '',
          wenjianbh: obj.wenjianbh || '',
          signtaskid: obj.signtaskid || ''
        }

        const cs = {
          ctype: 'xcx_3_chexiao_dianziht',
          bs64_cs: Base64.encode(JSON.stringify(bs64_cs)),
          bs64_obj: '',
          bs64_list: '',
          ids: '',
          faid: faid.value
        }

        const res = await request.post('https://fdddzq.haozskj.com/xcx/ajax/Ajax_fadadapost.ashx', { canshu: cs })
        
        if (res && res.leixing === 'ok') {
          ElMessage.success('作废成功')
          setTimeout(() => {
            loadData()
          }, 3000)
        } else {
          ElMessage.error(res?.msg || '作废失败')
        }
      } catch (error) {
        console.error('作废失败:', error)
        ElMessage.error('作废失败')
      }
    }

    // 保存完成 - 完全按照uniapp的saveWancheng方法
    const saveWancheng = async () => {
      try {
        // 先验证必填字段
        const objCopy = JSON.parse(JSON.stringify(obj.value))
        const zdlist = JSON.parse(JSON.stringify(formdata.zdlist))
        
        for (let item of zdlist) {
          if (item.bitian > 0) {
            if (!hidezdlist.value.includes(item.en_name)) {
              if (!objCopy[item.en_name] || objCopy[item.en_name].length === 0) {
                ElMessage.error(item.cn_name + '不能为空')
                return
              }
            }
          }
        }

        isFormSaved.value = false
        
        const bs64_cs = {
          pinglun: '完成',
          banliren: '',
          pinglunlx: 0,
          id: obj.id || currentId.value,
          openid: localStorage.getItem('openid') || "17524180246839845722",
          liuchengbh: obj.liuchengbh || '',
          liuchengzxbh: obj.liuchengzxbh || '',
          jiedianbh: obj.liuchengzxjdbh || ''
        }

        const cs = {
          ctype: 'app_pinglun_save',
          bs64_cs: Base64.encode(JSON.stringify(bs64_cs)),
          bs64_obj: '',
          bs64_list: '',
          ids: '',
          faid: obj.faid || faid.value
        }

        const res = await request.post(getApiPath(cs.ctype), { canshu: cs })
        
        if (res && res.leixing === 'ok') {
          ElMessage.success('操作成功')
          router.back()
        } else {
          ElMessage.error(res?.msg || '操作失败')
        }
      } catch (error) {
        console.log('完成操作失败:', error)
        ElMessage.error('操作失败')
      }
    }

    // ============= 方法定义结束 =============

    return {
      // 数据
      faid,
      currentId,
      obj,
      formdata,
      xzlist,
      cxlx,
      jkgongshi,
      kongobj,
      dx,
      gzqx,
      gzxbs,
      liuchengbh,
      dtype,
      pageTitle, // 动态页面标题
      lsobj,
      infoIndex,
      key,
      hidezdlist,
      yuming,
      Zhlist,
      Zhmoban,
      shengs,
      dataTree,
      showPopup,
      showZhPopup,
      showBtnPopup,
      baseFormRef,
      dialogTxt,
      dialogObj,
      Anshow,
      
      // 设备弹窗相关
      showDeviceDialog,
      deviceEditParams,
      currentDeviceIndex,
      
      // 图标
      Plus,
      Search,
      
      // 方法
      getDeviceTitle,
      getDeviceFields,
      buildDeviceDisplayList,
      getButtonIcon,
      getButtonClass,
      getFieldWidthClass,
      getActionButtonType,
      loadData,
      updateTabTitle,
      saveShuju,
      liucheng_tijiao,
      xzCanShu,
      xzDanCanShu,
      addgz,
      delmx,
      chooseImage,
      nullFun,
      getButtonType,
      onchange,
      onechange,
      cxDanCanShu,
      selectItem,
      toggleAll,
      notarize,
      empty,
      validateAndSubmit,
      clearFormValues,
      previewImage,
      dialogClick,
      toUrl_pinglun,
      goToDetailPage,
      closeZhPopup,
      logout,
      cancelLogout,
      toUrl_addshebei,
      toUrl_addshebeiT,
      toUrl_xq,
      editSb,
      handleDeviceSaveSuccess,
      buildDeviceDisplayList,
      operate,
      operates,
      
      // uniapp按钮处理方法
      DelData,
      Httj,
      saveDianziq,
      downOpenFile,
      faqiDianziq,
      chakanDianziq,
      xiazaiDianziht,
      saveDianziqBD,
      cancellation,
      saveWancheng
    }
  }
}
</script>

<style scoped>
/* ====================== 主容器优化布局 ====================== */
.container {
  padding: 16px;
  padding-bottom: 140px;
  background-color: #f5f5f5;
  min-height: 100vh;
  max-width: 1400px; /* 限制最大宽度 */
  margin: 0 auto; /* 居中显示 */
}

.main-content {
  display: flex;
  flex-direction: column;
  gap: 16px; /* 统一间距 */
}

.form-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease;
}

.form-section:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

/* 页面标题优化 */
.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 20px;
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
}

.page-title {
  color: white;
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ====================== 响应式表单布局 ====================== */
.responsive-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px 24px;
  max-width: 100%;
}

/* 字段宽度样式类 */
.field-full {
  grid-column: 1 / -1; /* 占据整行 */
}

.field-half {
  grid-column: span 2; /* 占据两列 */
}

.field-third {
  grid-column: span 1; /* 占据一列 */
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .responsive-form {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px 20px;
  }
  
  .field-half {
    grid-column: span 1; /* 在较小屏幕上改为一列 */
  }
}

@media (max-width: 768px) {
  .responsive-form {
    grid-template-columns: 1fr; /* 移动端单列布局 */
    gap: 16px;
  }
  
  .field-full,
  .field-half,
  .field-third {
    grid-column: span 1; /* 移动端所有字段都占一列 */
  }
}

/* 优化表单项间距 */
.responsive-form .el-form-item {
  margin-bottom: 0;
}

.responsive-form .el-form-item__label {
  margin-bottom: 8px;
  font-weight: 500;
  color: #303133;
  line-height: 1.4;
}

.responsive-form .el-form-item__content {
  line-height: normal;
}

.readonly-field {
  background-color: #f5f7fa;
  border-radius: 4px;
  padding: 8px 12px;
}

.readonly-content {
  color: #606266;
  font-size: 14px;
}

/* App风格字段提示和上传按钮 */
.field-tip {
  color: #ee0a24;
  font-size: 12px;
  margin-top: 6px;
  padding: 4px 8px;
  background: rgba(238, 10, 36, 0.1);
  border-radius: 4px;
  border-left: 3px solid #ee0a24;
}

.upload-buttons,
.upload-select-buttons {
  margin-top: 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.upload-buttons .el-button,
.upload-select-buttons .el-button {
  border-radius: 20px;
  padding: 10px 20px;
  font-weight: 500;
  transition: all 0.3s ease;
  border: 1px solid #ebedf0;
  background: white;
  color: #323233;
}

.upload-buttons .el-button:hover,
.upload-select-buttons .el-button:hover {
  background: linear-gradient(135deg, #1989fa 0%, #0570e8 100%);
  border-color: #1989fa;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(25, 137, 250, 0.3);
}

.upload-buttons .el-button--primary,
.upload-select-buttons .el-button--primary {
  background: linear-gradient(135deg, #1989fa 0%, #0570e8 100%);
  border-color: #1989fa;
  color: white;
}

.upload-buttons .el-button--success,
.upload-select-buttons .el-button--success {
  background: linear-gradient(135deg, #07c160 0%, #05a050 100%);
  border-color: #07c160;
  color: white;
}

.button-gap {
  width: 16px;
  height: 100%;
}

.param-select-input {
  cursor: pointer;
}

.param-select-input :deep(.el-input__wrapper) {
  cursor: pointer;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 1px dashed #1989fa;
}

.param-select-input :deep(.el-input__wrapper):hover {
  border-color: #0570e8;
  background: linear-gradient(135deg, #e6f7ff 0%, #d4edda 100%);
}

/* 明细数据样式 */
.detail-section {
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  padding: 16px;
}

.detail-item {
  margin-bottom: 16px;
  position: relative;
}

.detail-fields {
  display: grid;
  gap: 12px;
}

.field-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.field-label {
  min-width: 100px;
  font-weight: 500;
  color: #606266;
}

.field-input {
  flex: 1;
}

.delete-btn {
  position: absolute;
  top: 10px;
  right: 10px;
}

/* App风格主容器和表单样式 */
.container {
  padding: 12px;
  padding-bottom: 80px;
  background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
  min-height: 100vh;
}

/* 页面标题样式 */
.page-header {
  background: white;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 12px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
  border: 1px solid #f0f0f0;
  text-align: center;
}

.page-title {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  background: linear-gradient(135deg, #1989fa 0%, #0570e8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.main-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-section {
  background: white;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 0;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
}

.form-section:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border-color: #e6f7ff;
}

/* App风格表单元素 */
.el-form-item {
  margin-bottom: 20px;
}

.el-form-item__label {
  font-weight: 600;
  color: #323233;
  font-size: 14px;
  line-height: 1.5;
  padding-bottom: 8px;
}

.el-input, .el-select, .el-date-editor {
  border-radius: 8px;
}

.el-input__wrapper {
  border-radius: 8px;
  border: 1px solid #ebedf0;
  box-shadow: none;
  transition: all 0.3s ease;
}

.el-input__wrapper:hover {
  border-color: #1989fa;
}

.el-input__wrapper.is-focus {
  border-color: #1989fa;
  box-shadow: 0 0 0 2px rgba(25, 137, 250, 0.1);
}

.el-textarea__inner {
  border-radius: 8px;
  border: 1px solid #ebedf0;
  resize: vertical;
  min-height: 80px;
}

.el-textarea__inner:focus {
  border-color: #1989fa;
  box-shadow: 0 0 0 2px rgba(25, 137, 250, 0.1);
}

/* 只读字段样式 */
.readonly-field {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 8px;
  padding: 12px 16px;
  border: 1px solid #dee2e6;
}

.readonly-content {
  color: #495057;
  font-size: 14px;
  font-weight: 500;
}
/* uni-app风格设备列表样式 */
.tr {
  display: flex;
  width: 100%;
  margin-bottom: 12px;
}

.td_hang {
  flex: 1;
  display: flex;
  align-items: center;
}

.CenterButton {
  justify-content: center;
}

.all_button {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s;
}

.button_lvse {
  background: #67c23a;
  border-color: #67c23a;
  color: white;
}

.button_lvse:hover {
  background: #5cb230;
  border-color: #5cb230;
}

.one_button {
  padding: 12px 24px;
  font-size: 14px;
}

.table {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 16px;
}

.biaoti_01 {
  padding: 0;
  margin: 0;
}

.bt-color {
  background: #7491e9;
  color: #fff !important;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

.zb_list {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.3s;
}

.zb_list:hover {
  background: #f8f9fa;
}

.zb_list:last-child {
  border-bottom: none;
}

.info-box {
  border: 1px solid #e4e7ed;
  border-radius: 12px;
  padding: 16px;
  box-sizing: border-box;
  position: relative;
  padding-right: 140px;
  background: white;
  transition: all 0.3s;
}

.info-box:hover {
  border-color: #1989fa;
  box-shadow: 0 4px 12px rgba(25, 137, 250, 0.15);
}

.titles {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #303133;
  line-height: 1.4;
}

.khlist {
  color: #606266;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 8px;
  padding-left: 8px;
  position: relative;
}

.khlist::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #909399;
}

.khlist:last-child {
  margin-bottom: 0;
}

.copys {
  position: absolute;
  right: 16px;
  top: 16px;
  display: flex;
  width: 120px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
}

.action-btn {
  width: 100%;
  height: 28px;
  font-size: 12px;
  border-radius: 14px;
  padding: 0 12px;
  transition: all 0.3s;
}

.action-btn:hover {
  transform: translateY(-1px);
}

/* App风格设备列表样式 - 保留原有 */
.add-device-section {
  background: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  text-align: center;
}

.add-device-button {
  background-color: #1989fa;
  border-color: #1989fa;
  color: white;
  border-radius: 20px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(25, 137, 250, 0.3);
  transition: all 0.3s;
}

.add-device-button:hover {
  background-color: #0570e8;
  border-color: #0570e8;
  transform: translateY(-2px);
}

.device-list-header {
  background: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.device-count-badge {
  display: flex;
  align-items: center;
  gap: 8px;
}

.badge-label {
  font-size: 16px;
  font-weight: 600;
  color: #323233;
}

.badge-count {
  background: linear-gradient(135deg, #1989fa 0%, #0570e8 100%);
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  min-width: 20px;
  text-align: center;
}

.device-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.device-item-card {
  background: white;
  border-radius: 16px;
  padding: 0;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid #f0f0f0;
  overflow: hidden;
}

.device-item-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-color: #1989fa;
}

.device-item-card:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.device-card-content {
  padding: 20px;
  position: relative;
}

.device-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 16px;
  line-height: 1.4;
  padding-right: 80px;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 12px;
}

.device-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.device-info-item {
  display: flex;
  align-items: flex-start;
  padding: 6px 0;
  line-height: 1.5;
}

.info-label {
  color: #666;
  font-size: 14px;
  font-weight: 500;
  min-width: 120px;
  flex-shrink: 0;
}

.info-value {
  color: #1a1a1a;
  font-size: 14px;
  font-weight: 600;
  flex: 1;
}

.device-info-list {
  margin-bottom: 16px;
}

.device-info-item {
  color: #969799;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 6px;
  padding-left: 12px;
  position: relative;
}

.device-info-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 4px;
  height: 4px;
  background-color: #ddd;
  border-radius: 50%;
}

.device-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.device-actions .el-button {
  min-width: 60px;
  height: 32px;
  font-size: 12px;
  border-radius: 16px;
  padding: 0 16px;
  font-weight: 500;
  transition: all 0.3s;
}

.device-actions .el-button--primary {
  background: linear-gradient(135deg, #1989fa 0%, #0570e8 100%);
  border: none;
  color: white;
}

.device-actions .el-button--warning {
  background: linear-gradient(135deg, #ff9500 0%, #ff7700 100%);
  border: none;
  color: white;
}

.device-actions .el-button--danger {
  background: linear-gradient(135deg, #ee0a24 0%, #d91829 100%);
  border: none;
  color: white;
}

.device-actions .el-button:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.empty-device-list {
  background: white;
  border-radius: 16px;
  padding: 40px 20px;
  text-align: center;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.6;
}

.empty-text {
  color: #969799;
  font-size: 14px;
  margin-bottom: 20px;
}

.empty-add-button {
  background: linear-gradient(135deg, #1989fa 0%, #0570e8 100%);
  border: none;
  color: white;
  border-radius: 20px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s;
}

.empty-add-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(25, 137, 250, 0.4);
}

.sub-table-container {
  margin-bottom: 20px;
}

/* 移动端优化 */
@media (max-width: 768px) {
  .device-card-content {
    padding: 16px;
  }
  
  .device-title {
    font-size: 15px;
    padding-right: 60px;
  }
  
  .device-info-item {
    font-size: 13px;
  }
  
  .device-actions {
    gap: 6px;
  }
  
  .device-actions .el-button {
    min-width: 50px;
    height: 28px;
    font-size: 11px;
    padding: 0 12px;
  }
  
  .badge-label {
    font-size: 15px;
  }
  
  .badge-count {
    font-size: 11px;
    padding: 3px 10px;
  }
}

/* ====================== 表格和设备列表优化 ====================== */
.table-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease;
}

.table-section:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

/* 设备列表网格布局 */
.device-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

@media (max-width: 768px) {
  .device-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* 设备卡片优化 */
.device-item-card {
  background: #fafafa;
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
  overflow: hidden;
}

.device-item-card:hover {
  border-color: #409eff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
  transform: translateY(-2px);
}

/* 设备列表 zb_list 也采用网格布局 */
.zb_list {
  background: #fafafa;
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.zb_list:hover {
  border-color: #409eff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
  transform: translateY(-2px);
}

.zb_list:last-child {
  margin-bottom: 0;
}

/* 如果有多个 zb_list，也采用网格布局 */
.table .table-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
}

@media (max-width: 768px) {
  .table .table-container {
    grid-template-columns: 1fr;
  }
}

.table-header {
  margin-bottom: 12px;
}

.center-button {
  text-align: center;
}

.add-device-button {
  background-color: #67c23a;
  border-color: #67c23a;
  color: white;
}

.data-table {
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
}

.table-title {
  background-color: #409eff;
  color: white;
  padding: 12px 16px;
  border-radius: 8px 8px 0 0;
  margin: -16px -16px 16px -16px;
}

.title-text {
  font-weight: bold;
  font-size: 16px;
}

.data-list-item {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.3s;
}

.data-list-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.info-box {
  padding: 16px;
  position: relative;
  padding-right: 120px;
}

.item-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #303133;
}

.item-list {
  color: #909399;
  font-size: 14px;
  margin-bottom: 4px;
}

.action-buttons {
  position: absolute;
  right: 16px;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100px;
  align-items: center;
}

/* App风格底部按钮样式 */
.button-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid #ebeef5;
  padding: 12px 16px;
  z-index: 1000;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.button-group {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 56px;
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  gap: 8px;
}

.bottom-button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 12px;
  position: relative;
}

.bottom-button:active {
  transform: scale(0.95);
  background-color: rgba(25, 137, 250, 0.1);
}

.bottom-button:hover {
  background-color: rgba(25, 137, 250, 0.05);
}

.button-icon {
  font-size: 24px;
  margin-bottom: 4px;
  color: #1989fa;
  transition: color 0.3s;
}

.button-text {
  font-size: 11px;
  color: #323233;
  white-space: nowrap;
  font-weight: 500;
}

/* 更多按钮特殊样式 */
.more-button {
  position: relative;
}

.more-button .button-icon {
  color: #969799;
}

.more-button.active .button-icon {
  color: #1989fa;
  transform: rotate(180deg);
}

/* App风格更多按钮覆盖层 */
.more-buttons-overlay {
  position: absolute;
  bottom: 68px;
  right: 8px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  z-index: 10;
  border: 1px solid #f0f0f0;
  overflow: hidden;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.more-buttons-overlay::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 24px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 6px 0 6px;
  border-color: white transparent transparent transparent;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.more-buttons-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 16px;
  min-width: 240px;
}

.more-button-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 12px;
  position: relative;
}

.more-button-item:hover {
  background-color: rgba(25, 137, 250, 0.08);
}

.more-button-item:active {
  transform: scale(0.95);
  background-color: rgba(25, 137, 250, 0.15);
}

.more-button-item .button-icon {
  font-size: 20px;
  margin-bottom: 6px;
  color: #1989fa;
}

.more-button-item .button-text {
  font-size: 12px;
  color: #323233;
  text-align: center;
  line-height: 1.2;
}

/* 主要操作按钮突出显示 */
.primary-action .button-icon {
  color: #1989fa !important;
}

.primary-action .button-text {
  color: #1989fa !important;
  font-weight: 600;
}

/* 危险操作按钮 */
.danger-action .button-icon {
  color: #ee0a24 !important;
}

.danger-action .button-text {
  color: #ee0a24 !important;
}

/* 成功操作按钮 */
.success-action .button-icon {
  color: #07c160 !important;
}

.success-action .button-text {
  color: #07c160 !important;
}

/* 弹窗样式 */
.popup-content {
  max-height: 500px;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 16px;
}

.popup-title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.popup-buttons {
  display: flex;
  gap: 8px;
}

.search-area {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ebeef5;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 12px;
}

.list-container {
  max-height: 400px;
  overflow-y: auto;
}

.list-item {
  border-bottom: 1px solid #ebeef5;
  cursor: pointer;
  transition: background-color 0.3s;
}

.list-item:hover {
  background-color: #f5f7fa;
}

.item-content {
  padding: 16px;
}

.item-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.checkbox-container {
  display: flex;
  align-items: center;
}

.checkbox-custom {
  width: 18px;
  height: 18px;
  border: 2px solid #409eff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.checkbox-custom.checked {
  background-color: #409eff;
}

.checkbox-inner {
  width: 10px;
  height: 10px;
  background-color: white;
  border-radius: 50%;
}

.item-title {
  font-weight: 500;
  color: #303133;
  flex: 1;
}

.other-input {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 200px;
}

.item-details {
  color: #909399;
  font-size: 13px;
}

.detail-text {
  margin-bottom: 4px;
}

/* 综合字段弹窗样式 */
.zh-popup-container {
  width: 100%;
  position: relative;
  padding: 24px;
  padding-top: 60px;
}

.zh-popup-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: #f5f5f5;
  border-radius: 50%;
  z-index: 10;
}

.close-icon {
  font-size: 20px;
  color: #666;
  font-weight: bold;
}

.zh-popup-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 12px;
  background-color: #f5f5f5;
  border-radius: 8px;
}

.zh-popup-tips {
  color: #f56c6c;
  margin-bottom: 16px;
  padding: 8px 12px;
  background-color: #fef0f0;
  border-radius: 4px;
  font-size: 14px;
}

.zh-popup-content {
  max-height: 400px;
  overflow-y: auto;
}

.zh-form-group {
  margin-bottom: 20px;
}

.zh-form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.required-mark {
  color: #f56c6c;
  margin-right: 4px;
}

.zh-picker-wrapper {
  width: 100%;
}

/* 确认弹窗样式 */
.confirm-popup {
  text-align: center;
  padding: 20px;
}

.confirm-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.confirm-title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 12px;
}

.confirm-content {
  color: #606266;
  margin-bottom: 20px;
  line-height: 1.5;
}

.confirm-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* 特殊样式类 */
.hzs_h_1 {
  background-color: #fadddf;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .container {
    padding: 12px;
    padding-bottom: 120px;
  }
  
  .form-section {
    padding: 16px;
  }
  
  .info-box {
    padding-right: 16px;
  }
  
  .action-buttons {
    position: static;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: 12px;
    width: 100%;
  }
  
  .upload-select-buttons {
    flex-direction: column;
    gap: 8px;
  }
  
  .button-gap {
    width: 100%;
    height: 8px;
  }
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>